<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>工作台</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="gutter-example">
      <a-row :gutter="24">
        <a-col :span="16" class="gutter-row">
          <a-card title="当前订单箱量" :bordered="false" class="work_title">
            <template slot="extra">
              <a-form :ref="form" layout="inline">
                <a-form-item label="所属部门">
                  <a-tree-select
                    class="selectInputWidth"
                    v-model="form.deptId"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                    :load-data="onLoadData"
                    :tree-data="deptTreeData"
                    placeholder="请选择"
                    @change="onChangeTree"
                  ></a-tree-select>
                </a-form-item>
                <a-form-item label="操作">
                  <a-select v-model="form.sellerId" class="selectInputWidth" @change="roleChange">
                    <a-select-option v-for="v in sellers" :key="v.uiId">{{v.name}}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-form>
            </template>
            <div class="gutter-box">
              <a-row>
                <a-col :span="15">
                  <div class="echarts">
                    <div id="echarts1"></div>
                    <div class="echarts-label">
                      <div class="item-label" v-for="(v,k) in data1" :key="k">
                        <template v-if="v.name != '暂无数据'">
                          <span class="idot" :style="{'background-color': color[k]}"></span>
                          <span class="name">{{v.name}}</span>
                          <span
                            class="percent"
                          >| {{ total1 === 0 ? 0 : (v.value*100 / total1).toFixed(0)}}%</span>
                          <span class="number">{{v.value}} 个</span>
                        </template>
                      </div>
                    </div>
                  </div>
                </a-col>
                <a-col :span="9" style="border-left:1px solid #e8e8e8;">
                  <div id="echarts2"></div>
                  <div
                    class="item-label"
                    v-for="(v,k) in data2"
                    :key="k"
                    style="width:200px; margin:0 auto; line-height: 35px;"
                  >
                    <template v-if="v.name != '暂无数据'">
                      <span class="idot" :style="{'background-color': color[k]}"></span>
                      <span class="name">{{v.name}}</span>
                      <span
                        class="percent"
                      >| {{ total2 === 0 ? 0 : (v.value*100 / total2).toFixed(0)}}%</span>
                      <span class="number">{{v.value}} 个</span>
                    </template>
                  </div>
                </a-col>
              </a-row>
            </div>
          </a-card>
        </a-col>
        <a-col :span="8" class="gutter-row work_tit">
          <a-tabs
            :default-active-key="tabKey"
            @change="tabChange"
            style="background:#fff;height:384px"
          >
            <a-tab-pane :key="1" tab="待跟踪箱量">
              <div class="rankBody" v-if="rankData1.length > 0">
                <p class="ranking" v-for="(v, i) in rankData1" :key="i">
                  <span class="numberStyle">
                    <img v-if="i < 3" :src="nosPic[i]" />
                    <template v-else>
                      <span>{{i+1}}</span>
                    </template>
                  </span>
                  <span class="numberAvtar">
                    <img :src="v.headPic || defaultAvatar" alt />
                  </span>
                  <span class="numberText">{{v.handler}}</span>
                  <span class="numberPer">
                    <span
                      :style="{'display': 'inline-block', height: '22px', 'background': 'rgb(58, 161, 255)', 'width': Math.floor(v.quantity / rankData1[0].quantity *100) + '%' }"
                    ></span>
                  </span>
                  <span class="numberDesc">{{v.quantity}} 个</span>
                </p>
              </div>
              <a-empty v-else />
            </a-tab-pane>
            <a-tab-pane :key="2" tab="进行中箱量">
              <div class="rankBody" v-if="rankData1.length > 0">
                <p class="ranking" v-for="(v, i) in rankData2" :key="i">
                  <span class="numberStyle">
                    <img v-if="i < 3" :src="nosPic[i]" />
                    <template v-else>
                      <span>{{i+1}}</span>
                    </template>
                  </span>
                  <span class="numberAvtar">
                    <img :src="v.headPic || defaultAvatar" alt />
                  </span>
                  <span class="numberText">{{v.handler}}</span>
                  <span class="numberPer">
                    <span
                      :style="{'display': 'inline-block', height: '22px', 'background': 'rgb(58, 161, 255)', 'width': Math.floor(v.quantity / rankData2[0].quantity *100) + '%' }"
                    ></span>
                  </span>
                  <span class="numberDesc">{{v.quantity}} 个</span>
                </p>
              </div>
              <a-empty v-else />
            </a-tab-pane>
          </a-tabs>
        </a-col>
      </a-row>
    </div>
    <div class="gutter-example">
      <a-card title="历史订单箱量" :bordered="false" class="work_title">
        <template slot="extra">
          <!-- <a-button type="link" ghost @click="currentMonth">本月</a-button>
          <a-button type="link" ghost @click="currentYear">全年</a-button>
          <a-range-picker style="width:220px" @change="timeChange" :value="value" />-->
          <month-and-year @change="initDateSearch1" />
        </template>
        <div class="gutter-box">
          <a-row>
            <a-col :span="12">
              <div class="echarts">
                <div id="echarts3"></div>
                <div class="echarts-label">
                  <div class="item-label" v-for="(v,k) in data3" :key="k">
                    <template v-if="v.name != '暂无数据'">
                      <span class="idot" :style="{'background-color': color[k]}"></span>
                      <span class="name">{{v.name}}</span>
                      <span
                        class="percent"
                      >| {{( total3 === 0 ? 0 : v.value*100 / total3).toFixed(0)}}%</span>
                      <span class="number">{{v.value}} 个</span>
                    </template>
                  </div>
                </div>
              </div>
            </a-col>
            <a-col :span="12" style="border-left:1px solid #e8e8e8;">
              <div class="echarts">
                <div id="echarts4"></div>
                <div class="echarts-label">
                  <div class="item-label" v-for="(v,k) in data4" :key="k">
                    <template v-if="v.name != '暂无数据'">
                      <span class="idot" :style="{'background-color': color[k]}"></span>
                      <span class="name">{{v.name}}</span>
                      <span
                        class="percent"
                      >| {{( total4 === 0 ? 0 : v.value*100 / total4).toFixed(0)}}%</span>
                      <span class="number">{{v.value}} 个</span>
                    </template>
                  </div>
                </div>
              </div>
            </a-col>
          </a-row>
        </div>
      </a-card>
    </div>
    <div class="gutter-example">
      <a-tabs
        :default-active-key="tabKey2"
        @change="tabChange2"
        style="background:#fff;height:384px"
      >
        <a-tab-pane key tab="全部提醒">
          <a-list
            v-if="messageList.length > 0"
            item-layout="horizontal"
            :data-source="messageList"
            :style="messageList.length > 2 ? 'padding:10px 20px;height:361px;overflow-y:scroll;' : 'height:361px;padding:10px 20px'"
          >
            <a-list-item slot="renderItem" slot-scope="item">
              <template>
                <a-button
                  slot="actions"
                  type="primary"
                  :loading="remindStatus"
                  @click.stop="remindMessage(item)"
                >好的，我知道了</a-button>
              </template>
              <a-list-item-meta :description="item.sendDate">
                <span slot="title">
                  <b>{{item.typeName}}提醒</b>：公司编号为
                  <a @click.stop="orderDetail(item)">{{item.shipOrderCode}}</a>
                  {{item.content}}
                </span>
                <template>
                  <a-avatar
                    v-if="item.type === 'ORDER_TRUCK_CHARGEBACK'"
                    slot="avatar"
                    :src="tIcon"
                  />
                  <a-avatar
                    v-else-if="item.type === 'ORDER_TRUCK_CANCEL'"
                    slot="avatar"
                    :src="zIcon"
                  />
                  <a-avatar
                    v-else-if="item.type === 'ORDER_TRUCK_ANOMALOUS'"
                    slot="avatar"
                    :src="yIcon"
                  />
                </template>
              </a-list-item-meta>
            </a-list-item>
          </a-list>
          <a-empty v-else />
        </a-tab-pane>
        <a-tab-pane key="ORDER_TRUCK_CHARGEBACK" tab="退单">
          <a-list
            v-if="messageList.length > 0"
            item-layout="horizontal"
            :data-source="messageList"
            :style="messageList.length > 5 ? 'padding:10px 20px;height:361px;overflow-y:scroll;' : 'height:361px;padding:10px 20px'"
          >
            <a-list-item slot="renderItem" slot-scope="item">
              <template>
                <a-button
                  slot="actions"
                  type="primary"
                  :loading="remindStatus"
                  @click.stop="remindMessage(item)"
                >好的，我知道了</a-button>
              </template>
              <a-list-item-meta :description="item.sendDate">
                <span slot="title">
                  <b>{{item.typeName}}提醒</b>：公司编号为
                  <a @click.stop="orderDetail(item)">{{item.shipOrderCode}}</a>
                  {{item.content}}
                </span>
                <template>
                  <a-avatar
                    v-if="item.type === 'ORDER_TRUCK_CHARGEBACK'"
                    slot="avatar"
                    :src="tIcon"
                  />
                  <a-avatar
                    v-else-if="item.type === 'ORDER_TRUCK_CANCEL'"
                    slot="avatar"
                    :src="zIcon"
                  />
                  <a-avatar
                    v-else-if="item.type === 'ORDER_TRUCK_ANOMALOUS'"
                    slot="avatar"
                    :src="yIcon"
                  />
                </template>
              </a-list-item-meta>
            </a-list-item>
          </a-list>
          <a-empty v-else />
        </a-tab-pane>
        <a-tab-pane key="ORDER_TRUCK_CANCEL" tab="作废">
          <a-list
            v-if="messageList.length > 0"
            item-layout="horizontal"
            :data-source="messageList"
            :style="messageList.length > 5 ? 'padding:10px 20px;height:361px;overflow-y:scroll;' : 'height:361px;padding:10px 20px'"
          >
            <a-list-item slot="renderItem" slot-scope="item">
              <template>
                <a-button
                  slot="actions"
                  type="primary"
                  :loading="remindStatus"
                  @click.stop="remindMessage(item)"
                >好的，我知道了</a-button>
              </template>
              <a-list-item-meta :description="item.sendDate">
                <span slot="title">
                  <b>{{item.typeName}}提醒</b>：公司编号为
                  <a @click.stop="orderDetail(item)">{{item.shipOrderCode}}</a>
                  {{item.content}}
                </span>
                <template>
                  <a-avatar
                    v-if="item.type === 'ORDER_TRUCK_CHARGEBACK'"
                    slot="avatar"
                    :src="tIcon"
                  />
                  <a-avatar
                    v-else-if="item.type === 'ORDER_TRUCK_CANCEL'"
                    slot="avatar"
                    :src="zIcon"
                  />
                  <a-avatar
                    v-else-if="item.type === 'ORDER_TRUCK_ANOMALOUS'"
                    slot="avatar"
                    :src="yIcon"
                  />
                </template>
              </a-list-item-meta>
            </a-list-item>
          </a-list>
          <a-empty v-else />
        </a-tab-pane>
        <a-tab-pane key="ORDER_TRUCK_ANOMALOUS" tab="异常结束">
          <a-list
            v-if="messageList.length > 0"
            item-layout="horizontal"
            :data-source="messageList"
            :style="messageList.length > 5 ? 'padding:10px 20px;height:361px;overflow-y:scroll;' : 'height:361px;padding:10px 20px'"
          >
            <a-list-item slot="renderItem" slot-scope="item">
              <template>
                <a-button
                  slot="actions"
                  type="primary"
                  :loading="remindStatus"
                  @click.stop="remindMessage(item)"
                >好的，我知道了</a-button>
              </template>
              <a-list-item-meta :description="item.sendDate">
                <span slot="title">
                  <b>{{item.typeName}}提醒</b>：公司编号为
                  <a @click.stop="orderDetail(item)">{{item.shipOrderCode}}</a>
                  {{item.content}}
                </span>
                <template>
                  <a-avatar
                    v-if="item.type === 'ORDER_TRUCK_CHARGEBACK'"
                    slot="avatar"
                    :src="tIcon"
                  />
                  <a-avatar
                    v-else-if="item.type === 'ORDER_TRUCK_CANCEL'"
                    slot="avatar"
                    :src="zIcon"
                  />
                  <a-avatar
                    v-else-if="item.type === 'ORDER_TRUCK_ANOMALOUS'"
                    slot="avatar"
                    :src="yIcon"
                  />
                </template>
              </a-list-item-meta>
            </a-list-item>
          </a-list>
          <a-empty v-else />
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>
<script>
// import moment from 'moment'
import { querySellerDown, queryDeptDown } from '@/api'
import { getCurrentOrderQuantity, getOrderQuantityRanking, getHistoryOrderQuantity, queryBenchMessageList, readMessageInfo } from '@/api/orderCenter'
import no1 from '@/../static/images/no1.png'
import no2 from '@/../static/images/no2.png'
import no3 from '@/../static/images/no3.png'
import tIcon from '@/../static/images/tui.png'
import yIcon from '@/../static/images/yic.png'
import zIcon from '@/../static/images/zuof.png'
import defaultAvatar from '@/../static/images/defaultAvatar.png'
import MonthAndYear from '@/components/MonthAndYear'
const nosPic = [no1, no2, no3]
const deptData = {
  type: 1, // type 1判断权限 2不判断
  dataRole: 'CONTAINER_OPR'
}
const sellerData = {
  type: 1, // type 1判断权限 2不判断
  dataRole: 'CONTAINER_OPR',
  status: 1
}
const color = [
  '#3AA1FF',
  '#4ECB73',
  '#36CBCB',
  '#FBD437',
  '#F2637B',
  '#975FE4',
  '#F7B35A',
  '#57B0EB',
  '#ABE143',
  '#ED9D68',
  '#3AA1FF',
  '#4ECB73',
  '#36CBCB',
  '#FBD437',
  '#F2637B',
  '#975FE4',
  '#F7B35A',
  '#57B0EB',
  '#ABE143',
  '#ED9D68'
]
export default {
  components: {
    [MonthAndYear.name]: MonthAndYear
  },
  data () {
    return {
      defaultAvatar,
      nosPic,
      tabKey: 1,
      deptTreeData: [],
      sellers: [],
      form: {
        deptId: '',
        sellerId: ''
      },
      value: [],
      rankData1: [],
      rankData2: [],
      color,
      data1: [],
      total1: 0,
      data2: [],
      total2: 0,
      data3: [],
      total3: 0,
      data4: [],
      total4: 0,
      deptId: '',
      tIcon,
      yIcon,
      zIcon,
      messageList: [],
      tabKey2: '',
      remindStatus: false
    }
  },
  methods: {
    changeToText (e) {
      let text
      switch (e) {
        case 'domesticExportsQuantity':
          text = '内贸出口订单'
          break
        case 'domesticImportsQuantity':
          text = '内贸进口订单'
          break
        case 'foreignExportsQuantity':
          text = '外贸出口订单'
          break
        case 'foreignImportsQuantity':
          text = '外贸进口订单'
          break
        case 'unitedTransportExportsQuantity':
          text = '联运出口订单'
          break
        case 'unitedTransportImportsQuantity':
          text = '联运进口订单'
          break
      }
      return text
    },
    currentOrderRequest (e) {
      getCurrentOrderQuantity(e)
        .then(res => {
          // // console.log(res.data)
          let rd = res.data
          let data1 = [
            {
              value: rd.domesticExportsQuantity,
              name: this.changeToText('domesticExportsQuantity')
            },
            {
              value: rd.domesticImportsQuantity,
              name: this.changeToText('domesticImportsQuantity')
            },
            {
              value: rd.foreignExportsQuantity,
              name: this.changeToText('foreignExportsQuantity')
            },
            {
              value: rd.foreignImportsQuantity,
              name: this.changeToText('foreignImportsQuantity')
            },
            {
              value: rd.unitedTransportExportsQuantity,
              name: this.changeToText('unitedTransportExportsQuantity')
            },
            {
              value: rd.unitedTransportImportsQuantity,
              name: this.changeToText('unitedTransportImportsQuantity')
            }
          ]
          let total1 = 0
          data1.forEach(v => {
            total1 += v.value
          })
          this.data1 = data1
          this.total1 = total1
          let echarts1 = this.$echarts.init(
            document.getElementById('echarts1')
          )
          this.drawLine(echarts1, '进行中箱量', total1, data1)
          let data2 = [
            {
              name: '已跟踪',
              value: rd.trackedQuantity
            },
            {
              name: '待跟踪',
              value: rd.untrackedQuantity
            }
          ]
          let total2 = 0
          data2.forEach(v => {
            total2 += v.value
          })
          this.data2 = data2
          this.total2 = total2
          let echarts2 = this.$echarts.init(
            document.getElementById('echarts2')
          )
          this.drawLine(echarts2, '跟踪情况', total2, data2, '37%')
        })
        .catch(rs => {})
    },
    quantityRankRequest (e) {
      getOrderQuantityRanking(e)
        .then(res => {
          if (e.searchType === 1) {
            this.rankData1 = res.data
          } else {
            this.rankData2 = res.data
          }
        })
        .catch(rs => {})
    },
    historyOrderRequest (e) {
      getHistoryOrderQuantity(e)
        .then(res => {
          // console.log(res.data)
          let data3 = []
          let total3 = 0
          let arrayKeys = Object.keys(res.data.rspOrderTypeStatistics)
          let arrayVals = Object.values(res.data.rspOrderTypeStatistics)
          for (let i = 0; i < arrayKeys.length; i++) {
            let newObj = {
              value: arrayVals[i],
              name: this.changeToText(arrayKeys[i])
            }
            newObj.key = arrayKeys[i]
            newObj.value = arrayVals[i]
            data3.push(newObj)
            total3 += arrayVals[i]
          }
          this.data3 = data3
          this.total3 = total3
          let echarts3 = this.$echarts.init(
            document.getElementById('echarts3')
          )
          this.drawLine(echarts3, '完成箱量', total3, data3, '40%')

          let data4 = []
          let total4 = 0
          if (res.data.rspOrderHandlerInfoList.length > 0) {
            res.data.rspOrderHandlerInfoList.forEach(v => {
              let newObj = {
                value: v.quantity,
                name: v.handler
              }
              data4.push(newObj)
              total4 += v.quantity
            })
          } else {
            total4 = 0
            data4 = [{ value: 0, name: '暂无数据' }]
          }
          // console.log(data4)
          this.data4 = data4
          this.total4 = total4
          let echarts4 = this.$echarts.init(
            document.getElementById('echarts4')
          )
          this.drawLine(echarts4, '完成箱量', this.total4, this.data4, '40%')
        })
        .catch(rs => {})
    },
    drawLine (target, text, subtext, data, textPosition, fontColor) {
      // 绘制图表
      target.setOption(
        {
          title: {
            text: text,
            textStyle: {
              color: fontColor ? '#D9001B' : '#666',
              fontWeight: 'normal',
              fontSize: 14
            },
            subtext: subtext === 0 ? '0' : subtext,
            subtextStyle: {
              color: fontColor ? '#D9001B' : '#666',
              fontWeight: 'bold',
              fontSize: textPosition ? 20 : 26
            },
            top: textPosition || '43%',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: function (data) {
              return (
                data.seriesName +
                '<br/>' +
                data.name +
                ' : ' +
                data.value +
                ' (' +
                data.percent.toFixed(0) +
                '%)'
              )
            }
          },
          legend: {
            selectedMode: 'true',
            top: 0,
            left: 10,
            orient: 'vertical',
            textStyle: {
              fontSize: 14,
              color: '#666'
            },
            show: false
          },
          series: [
            {
              name: '箱量',
              type: 'pie',
              radius: ['70%', '85%'],
              selectedMode: 'single',
              label: {
                show: false,
                position: 'center'
              },
              color: color,
              data: data
            }
          ]
        },
        true
      )
    },
    removeOrderInstance () {
      document.getElementById('echarts1').removeAttribute('_echarts_instance_')
      document.getElementById('echarts2').removeAttribute('_echarts_instance_')
    },
    removehistoryInstance () {
      document.getElementById('echarts3').removeAttribute('_echarts_instance_')
      document.getElementById('echarts4').removeAttribute('_echarts_instance_')
    },
    onLoadData (treeNode) {
      return new Promise(resolve => {
        if (treeNode.dataRef.children && treeNode.dataRef.children.length > 0) {
          resolve()
          return
        }
        queryDeptDown({ parentId: treeNode.dataRef.key, ...deptData }).then(
          rsp => {
            let childrenData = []
            rsp.data.forEach(value => {
              childrenData.push({
                title: value.name,
                key: value.deptId,
                value: value.deptId
              })
            })
            treeNode.dataRef.children = childrenData
            this.deptTreeData = [...this.deptTreeData]
            resolve()
          }
        )
      })
    },
    initDept (e) {
      queryDeptDown(e).then(rsp => {
        let initData = []
        rsp.data.forEach((value, index) => {
          initData.push({
            title: value.name,
            key: value.deptId,
            value: value.deptId
          })
        })
        this.deptTreeData = initData
        this.form.deptId = initData[0].key
      })
    },
    onChangeTree (value) {
      // // console.log(value)
      this.initSellerDown(value)
      this.deptId = value
      this.removeOrderInstance()
      this.currentOrderRequest({
        deptId: value
      })
    },
    initSellerDown (deptId) {
      querySellerDown({ ...sellerData, deptId }).then(rsp => {
        this.sellers = rsp.data.map((v, i) => {
          if (!v.uiId) {
            v.name = '请选择'
            v.uiId = ''
          }
          return v
        })
        this.form.sellerId = this.sellers[0].uiId
      })
    },
    roleChange (e) {
      this.removeOrderInstance()
      this.currentOrderRequest({
        deptId: this.deptId,
        handlerId: e
      })
    },
    tabChange (key) {
      this.tabKey = key
      this.quantityRankRequest({
        searchType: key
      })
    },
    initDateSearch1 (startTime, endTime) {
      this.removehistoryInstance()
      this.historyOrderRequest({
        startDate: startTime,
        endDate: endTime
      })
    },
    messageRequest (e) {
      queryBenchMessageList(e).then(res => {
        console.log(res.data)
        this.messageList = res.data
      })
    },
    readMessageRequest (e) {
      this.remindStatus = true
      readMessageInfo(e).then(res => {
        setTimeout(() => {
          this.messageRequest({
            messageType: this.tabKey2
          })
          this.remindStatus = false
        }, 300)
      })
    },
    tabChange2 (e) {
      this.tabKey2 = e
      this.messageRequest({
        messageType: e
      })
    },
    remindMessage (e) {
      this.readMessageRequest({
        messageId: e.messageId
      })
    },
    orderDetail (e) {
      window.open(`/orderCenter/order/detail/${e.shipOrderId}`, '_blank')
    }
  },
  created () {
    this.initDept(deptData) // 所属部门
    this.initSellerDown() // 所属销售
    this.currentOrderRequest({})
    this.quantityRankRequest({
      searchType: this.tabKey
    })
    this.messageRequest({})
  }
}
</script>

<style scoped>
.gutter-example {
  margin: 24px;
}
.gutter-example >>> .ant-row > div {
  background: transparent;
  border: 0;
}
.gutter-box {
  background: #fff;
  padding: 5px 0;
}
.echarts {
  display: flex;
}
#echarts1,
#echarts3,
#echarts4 {
  width: 230px;
  height: 230px;
}
#echarts2 {
  width: 200px;
  height: 200px;
  margin: 0 auto;
}
.echarts-label {
  flex: 1;
  padding: 20px 0;
  line-height: 35px;
}
.item-label {
  display: flex;
  align-items: center;
  justify-items: center;
  font-size: 14px;
}
.item-label .idot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 12px;
}
.item-label .name {
  color: #666;
  margin-right: 9px;
}
.item-label .percent {
  color: #ccc;
  margin-right: 9px;
}
.item-label .number {
  color: #666;
}
.ant-btn-background-ghost.ant-btn-link {
  color: #1890ff;
  color: #666;
}
.ant-btn-background-ghost.ant-btn-link:hover,
.ant-btn-background-ghost.ant-btn-link:focus {
  color: #40a9ff;
  background-color: transparent;
  border-color: transparent;
}
</style>
<style lang="less" scoped>
.rankBody {
  margin: 0px 0px 20px 0px;
  padding: 0px 15px;
  height: 293px;
  overflow: auto;
  .ranking {
    min-width: 380px;
    margin: 5px 0 15px 0;
    overflow: hidden;
    .numberStyle {
      display: block;
      float: left;
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      margin-right: 10px;
    }

    .numberAvtar {
      display: block;
      float: left;
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      margin-right: 10px;

      img {
        width: 28px;
        height: 28px;
        border: 1px solid #eee;
        border-radius: 50%;
      }
    }

    .numberText {
      display: block;
      float: left;
      width: 80px;
      height: 30px;
      line-height: 30px;
      overflow: hidden;
    }

    .numberPer {
      display: block;
      float: left;
      width: 45%;
      height: 22px;
      padding: 4px 0;
    }

    .numberDesc {
      display: block;
      float: left;
      text-indent: 5px;
      height: 30px;
      line-height: 30px;
    }
  }
}
</style>
<style lang="less" scoped>
.gutter-example {
  /deep/ .ant-tabs-bar {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #e8e8e8 !important;
  }
  /deep/ .ant-tabs-tab {
    padding: 17.5px 24px !important;
  }
}
</style>
